<template>
  <el-collapse-item :name="data" class="league_collapse-item">
    <template #title>
      <div
        class="league_collapse_title"
        style="flex: 1"
        @click="homeStore.changeactiveleague2(data.country_id)"
      >
        <img style="width: 20px; height: 20px; border-radius: 50%" :src="data.icon" alt="" />
        <div
          class="title AlibabaPuHuiTi_2_85_"
          :style="
            homeState.activecountryStyle != '' && homeState.activecountryStyle == data.country_id
              ? 'color: #3711d8;'
              : ''
          "
        >
          {{ languageType == 'zh' ? data.country :  data.country_en }}

        </div>
        <!-- </div> -->
      </div>
    </template>
    <template #icon="{ isActive }">
      <span class="icon-ele">
        <img v-if="isActive" style="width: 16px; height: 16px" src="@/assets/home/shouqi.png" alt="" />
        <img v-else style="width: 16px; height: 16px" src="@/assets/home/zhankai.png" alt="" />
      </span>
    </template>
    <div class="league_collapse-content">
      <template v-if="more == 0">
        <div
          class="league_item AlibabaPuHuiTi_2_55_"
          v-for="item in leagues.data"
          :key="item.league_id"
          :style="
            homeState.activecountryStyle == '' && homeState.activeleague.includes(item.league_id)
              ? 'color: #3711d8;'
              : ''
          "
          @click="homeStore.changeactiveleague(item.league_id)"
        >
          {{ languageType == 'zh' ? item.league_name : item.league_en }}
        </div>
      </template>
      <template v-if="more == 1">
        <div
          class="league_item AlibabaPuHuiTi_2_55_"
          v-for="item in leagues.alldata"
          :key="item.league_id"
          :style="
            homeState.activecountryStyle == '' && homeState.activeleague.includes(item.league_id)
              ? 'color: #3711d8;'
              : ''
          "
          @click="homeStore.changeactiveleague(item.league_id)"
        >
          {{ languageType == 'zh' ? item.league_name : item.league_en }}
        </div>
      </template>

      <div
        class="league_item AlibabaPuHuiTi_2_55_"
        v-if="leagues.ismore == true && more == 0"
        @click="clickmore()"
      >
        {{languageJson.home.more}} >
      </div>
    </div>
  </el-collapse-item>
</template>

<script setup>
import { computed } from 'vue'
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const props = defineProps({
  data: Object,
})

const { homeStore, homeState } = inject('HomeStore')

const more = ref(0)

const leagues = computed(() => {
  let a = {
    alldata: [],
    data: [],
    ismore: false,
    more: 0, // 0：查看更多按钮显示   1：查看更多按钮隐藏
  }
  Object.values(props.data.leagues).forEach(value => {
    a.alldata.push(value)
  })

  if (a.alldata.length > 4) {
    a.ismore = true
    a.more = 0
    more.value = 0
    a.data = a.alldata.slice(0, 4)
  } else {
    a.data = JSON.parse(JSON.stringify(a.alldata))
  }
  return a
})

const clickmore = () => {
  leagues.value.more = 1
  more.value = 1
}
</script>

<style lang="scss" scoped>
.league_collapse_title {
  display: flex;
  align-items: center;
}
.title {
  font-size: 14px;
  font-weight: bold;
  color: #000;
  margin-left: 8px;
}
.league_collapse-content {
  display: flex;
  flex-direction: column;
}
.league_item {
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
</style>

<style>
.league_collapse-item .el-collapse-item__header {
  display: flex;
  justify-content: space-between;
  border: none;
  height: 36px;
}
.league_collapse-item .el-collapse-item__wrap {
  border: none;
}
.league_collapse-item .el-collapse-item__content {
  padding-left: 28px;
  padding-bottom: 0;
}
</style>
